<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>动物世界·登录系统</title>
  <style>
    *{margin:0;padding:0;box-sizing:border-box;font-family:"微软雅黑",sans-serif;}
    body{background:#f0f8f0;display:flex;flex-direction:column;min-height:100vh;}
    /* 登录页 */
    #loginBox{width:320px;margin:100px auto;background:#fff;padding:30px;border-radius:10px;box-shadow:0 5px 15px rgba(0,128,0,.1);}
    #loginBox h2{text-align:center;color:#2e8b57;margin-bottom:20px;}
    .inp{width:100%;padding:10px;margin-bottom:15px;border:1px solid #ddd;border-radius:6px;}
    .btn{width:100%;padding:10px;border:none;border-radius:6px;background:#2e8b57;color:#fff;font-size:16px;cursor:pointer;}
    .btn:hover{background:#236b42;}
    /* 主页面 */
    #mainPage{display:none;flex:1;flex-direction:column;}
    header{background:#2e8b57;color:#fff;text-align:center;padding:20px;font-size:24px;}
    header small{display:block;font-size:14px;margin-top:5px;}
    .content{flex:1;padding:20px;}
    /* 底部万能对话框 */
    #cmdBar{height:50px;background:#2e8b57;display:flex;padding:5px;}
    #cmdInput{flex:1;border:none;padding:0 10px;font-size:16px;border-radius:6px 0 0 6px;}
    #cmdBtn{width:80px;border:none;background:#236b42;color:#fff;font-size:16px;border-radius:0 6px 6px 0;cursor:pointer;}
    /* 成员管理器 */
    #memberWrap{display:none;flex:1;background:#fff;margin:20px;padding:20px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.1);}
    #memberWrap h3{margin-bottom:15px;color:#2e8b57;}
    .userLine{display:flex;gap:8px;margin-bottom:10px;}
    .userLine input{flex:1;padding:6px;border:1px solid #ccc;border-radius:4px;}
    .userLine button{padding:4px 10px;border:none;border-radius:4px;cursor:pointer;}
    .btnSave{background:#2e8b57;color:#fff;}
    .btnDel{background:#cd5c5c;color:#fff;}
    .btnAdd{background:#8fbc8f;color:#fff;}
    /* 管理-今日事件 */
    #manageWrap{display:none;flex:1;background:#fff;margin:20px;padding:20px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.1);}
    #manageWrap h3{margin-bottom:15px;color:#2e8b57;}
    .eventInp{width:100%;padding:8px;margin-bottom:10px;border:1px solid #ddd;border-radius:4px;}
    /* 群聊 */
    #chatWrap{display:none;flex:1;flex-direction:column;background:#fff;margin:20px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.1);}
    #chatHead{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;border-bottom:1px solid #eee;}
    #chatBox{flex:1;padding:15px;overflow-y:auto;}
    .chatItem{margin-bottom:10px;}
    .chatName{font-weight:bold;color:#2e8b57;}
    .chatMsg{margin-left:5px;}
    #chatFoot{display:flex;padding:10px;border-top:1px solid #eee;}
    #chatInp{flex:1;padding:8px;border:1px solid #ddd;border-radius:4px;}
    #chatSend{width:60px;margin-left:8px;border:none;background:#2e8b57;color:#fff;border-radius:4px;cursor:pointer;}
    /* 贪吃蛇 */
    #snakeWrap{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff;border-radius:10px;box-shadow:0 0 20px rgba(0,0,0,.3);padding:15px;display:none;z-index:10000;}
    #snakeCanvas{background:#111;border-radius:6px;display:block;margin:0 auto;}
    #snakeScore{text-align:center;color:#333;margin-top:8px;}
    .closeSnake{display:block;margin:10px auto 0;padding:6px 18px;border:none;border-radius:4px;background:#cd5c5c;color:#fff;cursor:pointer;}
  </style>
</head>
<body>

<!-- 1. 登录页 -->
<div id="loginBox">
  <h2>Animal World 登录</h2>
  <input class="inp" id="loginName" placeholder="社团昵称" autocomplete="off">
  <input class="inp" id="loginPwd" type="password" placeholder="密码" autocomplete="off">
  <button class="btn" onclick="doLogin()">登录</button>
</div>

<!-- 2. 主页面 -->
<div id="mainPage">
  <header>Animal World<br><small>动物世界只因家族</small></header>
  <div class="content" id="contentArea">
    <p style="color:#666">请在下方对话框输入指令：成员 / 管理 / 聊天 / 游戏 / 退出</p>
  </div>
  <!-- 底部万能对话框 -->
  <div id="cmdBar">
    <input id="cmdInput" placeholder="输入指令：成员 / 管理 / 聊天 / 游戏 / 退出" autocomplete="off">
    <button id="cmdBtn" onclick="handleCmd()">→</button>
  </div>
</div>

<!-- 3. 成员管理器 -->
<div id="memberWrap">
  <h3>成员管理器（默认猫小乐/0000）</h3>
  <div id="memberList"></div>
  <div class="userLine">
    <input id="newNick" placeholder="新昵称">
    <input id="newPwd" placeholder="新密码">
    <button class="btnAdd" onclick="addUser()">新建</button>
  </div>
  <button class="btn" onclick="closeMember()" style="margin-top:15px;background:#8fbc8f;">关闭</button>
</div>

<!-- 4. 管理-今日事件 -->
<div id="manageWrap">
  <h3>今日事件管理（密码0530）</h3>
  <div id="manageList"></div>
  <button class="btn" onclick="saveEvents()" style="margin-top:15px;">保存今日事件</button>
  <button class="btn" onclick="closeManage()" style="margin-top:8px;background:#8fbc8f;">关闭</button>
</div>

<!-- 5. 群聊浮层 -->
<div id="chatWrap">
  <div id="chatHead">
    <span><b>群聊大厅</b></span>
    <button onclick="closeChat()" style="border:none;background:#cd5c5c;color:#fff;padding:4px 8px;border-radius:4px;cursor:pointer;">×</button>
  </div>
  <div id="chatBox"></div>
  <div id="chatFoot">
    <input id="chatInp" placeholder="说点什么…">
    <button id="chatSend" onclick="sendMsg()">发送</button>
  </div>
</div>

<!-- 6. 贪吃蛇浮层 -->
<div id="snakeWrap">
  <canvas id="snakeCanvas" width="400" height="400"></canvas>
  <div id="snakeScore">得分：0</div>
  <button class="closeSnake" onclick="closeSnake()">关闭</button>
</div>

<script>
/********************************************************************
 *  用户数据池 ｜ 默认猫小乐 0000
 ********************************************************************/
const USER_KEY = 'aw_userList';
let userList   = JSON.parse(localStorage.getItem(USER_KEY)) || [{nick:'猫小乐',pwd:'0000'}];

/********************************************************************
 *  登录 / 退出
 ********************************************************************/
function doLogin(){
  const n = document.getElementById('loginName').value.trim();
  const p = document.getElementById('loginPwd').value.trim();
  if(!n){alert('请输入昵称');return;}
  const u = userList.find(x=>x.nick===n);
  if(!u || u.pwd!==p){alert('昵称或密码错误！');return;}
  currentUser = n;
  document.getElementById('loginBox').style.display='none';
  document.getElementById('mainPage').style.display='flex';
  document.getElementById('cmdInput').focus();
}
function doLogout(){
  currentUser=null; location.reload();
}
let currentUser = null;

/********************************************************************
 *  万能对话框
 ********************************************************************/
document.getElementById('cmdInput').addEventListener('keydown',e=>{if(e.key==='Enter')handleCmd();});
function handleCmd(){
  const raw = document.getElementById('cmdInput').value.trim();
  if(!raw)return;
  const cmd = raw.toLowerCase();
  switch(cmd){
    case '成员': openMember(); break;
    case '管理': checkManage(); break;
    case '聊天': openChat(); break;
    case '游戏': startSnake(); break;
    case '退出': doLogout(); break;
    default: alert('暂不支持指令：'+raw); break;
  }
  document.getElementById('cmdInput').value='';
}

/********************************************************************
 *  成员管理器
 ********************************************************************/
function openMember(){
  document.getElementById('memberWrap').style.display='block';
  renderMember();
}
function closeMember(){
  document.getElementById('memberWrap').style.display='none';
}
function renderMember(){
  const box=document.getElementById('memberList');
  let html='';
  userList.forEach((u,i)=>{
    html+=`
      <div class="userLine">
        <input value="${u.nick}" onchange="updateNick(${i},this.value)">
        <input value="${u.pwd}" onchange="updatePwd(${i},this.value)">
        <button class="btnDel" onclick="delUser(${i})">删除</button>
      </div>`;
  });
  box.innerHTML=html;
}
function addUser(){
  const nick=document.getElementById('newNick').value.trim();
  const pwd =document.getElementById('newPwd').value.trim();
  if(!nick||!pwd){alert('昵称和密码都不能空');return;}
  if(userList.find(x=>x.nick===nick)){alert('昵称已存在');return;}
  userList.push({nick,pwd});
  saveUser(); renderMember();
  document.getElementById('newNick').value='';
  document.getElementById('newPwd').value='';
}
function updateNick(i,v){
  if(!v){alert('昵称不能为空');return;}
  if(userList.find((x,idx)=>idx!==i&&x.nick===v)){alert('昵称重复');return;}
  userList[i].nick=v; saveUser();
}
function updatePwd(i,v){
  if(!v){alert('密码不能为空');return;}
  userList[i].pwd=v; saveUser();
}
function delUser(i){
  if(!confirm('确定删除该用户？'))return;
  userList.splice(i,1); saveUser(); renderMember();
}
function saveUser(){
  localStorage.setItem(USER_KEY,JSON.stringify(userList));
}

/********************************************************************
 *  管理-今日事件
 ********************************************************************/
const EVENT_KEY='aw_events';
let eventData=JSON.parse(localStorage.getItem(EVENT_KEY))||{};

function checkManage(){
  const p=prompt('请输入管理密码（默认0530）');
  if(p==='0530'){openManage();}else{alert('管理密码错误');}
}
function openManage(){
  const wrap=document.getElementById('manageWrap');
  wrap.style.display='block';
  const listBox=document.getElementById('manageList');
  let html='';
  userList.forEach(u=>{
    html+=`<label>${u.nick}</label><textarea class="eventInp" id="evt_${u.nick}" placeholder="今天做了什么...">${eventData[u.nick]||''}</textarea>`;
  });
  listBox.innerHTML=html;
}
function closeManage(){
  document.getElementById('manageWrap').style.display='none';
}
function saveEvents(){
  userList.forEach(u=>{
    eventData[u.nick]=document.getElementById('evt_'+u.nick).value.trim();
  });
  localStorage.setItem(EVENT_KEY,JSON.stringify(eventData));
  alert('已保存今日事件！'); closeManage();
}

/********************************************************************
 *  群聊功能
 ********************************************************************/
const CHAT_KEY='aw_chat';
let chatData=JSON.parse(localStorage.getItem(CHAT_KEY))||[];

function openChat(){
  document.getElementById('chatWrap').style.display='flex';
  renderChat();
  document.getElementById('chatInp').focus();
}
function closeChat(){
  document.getElementById('chatWrap').style.display='none';
}
function renderChat(){
  const box=document.getElementById('chatBox');
  if(!chatData.length){box.innerHTML='<div style="color:#999">暂无消息，快来抢沙发！</div>';return;}
  let html='';
  chatData.slice(-50).forEach(o=>{
    const t=new Date(o.ts).toLocaleTimeString();
    html+=`<div class="chatItem"><span class="chatName">${o.nick}</span><span class="chatMsg">${o.msg}</span><span style="color:#999;font-size:12px;margin-left:8px;">${t}</span></div>`;
  });
  box.innerHTML=html;
  box.scrollTop=box.scrollHeight;
}
function sendMsg(){
  const inp=document.getElementById('chatInp');
  const txt=inp.value.trim();
  if(!txt)return;
  chatData.push({nick:currentUser,msg:txt,ts:Date.now()});
  localStorage.setItem(CHAT_KEY,JSON.stringify(chatData));
  inp.value=''; renderChat();
}

/********************************************************************
 *  贪吃蛇游戏
 ********************************************************************/
const sw=document.getElementById('snakeWrap');
const canvas=document.getElementById('snakeCanvas');
const ctx=canvas.getContext('2d');
const grid=20, tileCount=canvas.width/grid;
let snake=[{x:10,y:10}], dx=1, dy=0, apple={x:15,y:15}, score=0, running=false;

function startSnake(){
  score=0; dx=1; dy=0; snake=[{x:10,y:10}]; randomApple(); running=true;
  sw.style.display='block'; gameLoop();
}
function closeSnake(){ running=false; sw.style.display='none'; }
function randomApple(){ apple.x=Math.floor(Math.random()*tileCount); apple.y=Math.floor(Math.random()*tileCount); }
function gameLoop(){
  if(!running)return; update(); draw(); setTimeout(gameLoop,100);
}
function update(){
  const head={x:snake[0].x+dx,y:snake[0].y+dy};
  if(head.x<0)head.x=tileCount-1; if(head.x>=tileCount)head.x=0;
  if(head.y<0)head.y=tileCount-1; if(head.y>=tileCount)head.y=0;
  for(let i=0;i<snake.length;i++)if(head.x===snake[i].x&&head.y===snake[i].y){alert('游戏结束 得分：'+score);closeSnake();return;}
  snake.unshift(head); if(head.x===apple.x&&head.y===apple.y){score++;document.getElementById('snakeScore').textContent='得分：'+score;randomApple();}else snake.pop();
}
function draw(){
  ctx.fillStyle='#111'; ctx.fillRect(0,0,canvas.width,canvas.height);
  ctx.fillStyle='#2e8b57'; snake.forEach((s,i)=>{ctx.globalAlpha=i===0?1:0.8; ctx.fillRect(s.x*grid,s.y*grid,grid-2,grid-2);}); ctx.globalAlpha=1;
  ctx.fillStyle='#cd5c5c'; ctx.fillRect(apple.x*grid,apple.y*grid,grid-2,grid-2);
}
window.addEventListener('keydown',e=>{
  if(!running)return;
  if(e.key==='ArrowUp'&&dy===0){dx=0;dy=-1;} if(e.key==='ArrowDown'&&dy===0){dx=0;dy=1;}
  if(e.key==='ArrowLeft'&&dx===0){dx=-1;dy=0;} if(e.key==='ArrowRight'&&dx===0){dx=1;dy=0;}
});
</script>
</body>
</html>
